<template>
	<div class="main-content">
		<div class="layout-breadcrumb">
			<Breadcrumb>
				<BreadcrumbItem href="#">客户</BreadcrumbItem>
				<BreadcrumbItem href="#">客户管理</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<Card>
			<Row>
				<Col span="24">
				<span>注册邮箱：</span>
				<Input v-model="search.email" size="large" placeholder="请输入查询邮箱" style="width:200px;"></Input>
				<span style="margin-left:20px;">公司名称：</span>
				<Input v-model="search.company" size="large" placeholder="请输入公司名称" style="width:200px;"></Input>
				<span style="margin-left:20px;">审核状态：</span>
				<Select v-model="search.status" size="large" style="width:200px;">
					<Option value="0">全部</Option>
					<Option value="1">审核中</Option>
					<Option value="2">审核通过</Option>
					<Option value="3">审核拒绝</Option>
				</Select>
				<Button style="margin-left:20px;" type="primary" size="large" @click="goSearch">查询</Button>
				</Col>
			</Row>
		</Card>
		<Card style="margin-top:20px;">
			<div class="layout-content clearfix">
				<div class="layout-content-main">
					<div class="header">
						<Button style="margin-bottom:20px;" type="primary" size="large" @click="turnNewClient">新建客户</Button>
						<Table stripe :columns="columns" :data="data"></Table>
						<div class="page-wrapper">
							<Page :current="page.current" :total="page.total" :page-size="page.size" x show-total @on-change="changeCur" @on-page-size-change="changeSize"></Page>
						</div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>
<script>
export default {
  name: 'client',
  data() {
    return {
      search: {
        email: '',
        company: '',
        status: '0'
      },
      page: {
        current: 1,
        total: 100,
        size: 50
      },
      columns: [
        // {
        //   title: 'ID',
        //   key: 'user_id',
        //   align: 'center'
        // },
        {
          title: '注册邮箱',
          key: 'user_email',
          align: 'center'
        },
        {
          title: '公司全称',
          key: 'org_name',
          align: 'center'
        },
        {
          title: '联系人',
          key: 'user_name',
          align: 'center'
        },
        {
          title: '手机号码',
          key: 'user_phone',
          align: 'center'
        },
        {
          title: 'QQ号码',
          key: 'user_qq',
          align: 'center'
        },
        {
          title: '状态',
          key: 'audit_status',
          align: 'center',
          render: (h, params) => {
            let auditStatus = '';
            if (Number(params.row.audit_status) === 1) {
              auditStatus = '审核中';
              return h(
                'span',
                {
                  style: {
                    color: '#f90'
                  }
                },
                auditStatus
              );
            }
            if (Number(params.row.audit_status) === 2) {
              auditStatus = '审核通过';
              return h(
                'span',
                {
                  style: {
                    color: '#19be6b'
                  }
                },
                auditStatus
              );
            }
            if (Number(params.row.audit_status) === 3) {
              auditStatus = '审核未通过';
              return h(
                'span',
                {
                  style: {
                    color: '#ed3f14'
                  }
                },
                auditStatus
              );
            }
          }
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params, index) => {
            return h('div', [
              h(
                'a',
                {
                  on: {
                    click: () => {
                      this.$router.push({
                        path: '/home/client/editClient/' + params.row.user_id
                      });
                    }
                  }
                },
                '修改信息'
              )
            ]);
          }
        }
      ],
      data: []
    };
  },
  mounted() {
    this._loadData();
  },
  methods: {
    _loadData() {
      let vm = this;
      let params = {
        type: 'get',
        url: 'member',
        params: {
          email: vm.search.email,
          company: vm.search.company,
          status: vm.search.status,
          page: vm.page.current,
          size: vm.page.size
        },
        sCallback(data) {
          vm.page.current = Number(data.data.current_page);
          vm.page.total = Number(data.data.total);
          vm.page.size = Number(data.data.per_page);
          vm.data = data.data.data;
        },
        eCallback(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },

    goSearch() {
      this._loadData();
    },
    changeCur(current) {
      this.page.current = current;
      this._loadData();
    },
    changeSize(pageSize) {
      this.page.size = pageSize;
      this._loadData();
    },
    turnNewClient() {
      this.$router.push({
        path: '/home/client/newClient'
      });
    }
  }
};
</script>